<!-- <template>
    <div class="camera-app">
      <video ref="video" autoplay></video>
      <button @click="takePhoto">拍照</button>
      <div class="photo-container" v-if="photoDataUrl">
        <img :src="photoDataUrl" alt="Captured Photo" />
      </div>
    </div>
  </template>

  <script setup>
  defineOptions({
    name: 'PhotoUserDemo'
  })
  import { ref, onMounted, onUnmounted } from 'vue';

  const video = ref(null);
  let photoDataUrl = ref(null);
  let stream = null;

  const takePhoto = () => {
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    canvas.width = video.value.videoWidth;
    canvas.height = video.value.videoHeight;
    context.drawImage(video.value, 0, 0, canvas.width, canvas.height);
    photoDataUrl.value = canvas.toDataURL('image/png');
  };

  onMounted(() => {
    navigator.mediaDevices.getUserMedia({ video: true })
      .then(mediaStream => {
        stream = mediaStream;
        video.value.srcObject = mediaStream;
      })
      .catch(error => {
        console.error('Error accessing the camera:', error);
      });
  });

  onUnmounted(() => {
    if (stream) {
      stream.getTracks().forEach(track => track.stop());
    }
  });
  </script>

  <style scoped>
  .camera-app {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  video {
    margin-bottom: 10px;
    max-width: 100%;
  }

  .photo-container {
    margin-top: 10px;
    display: flex;
    justify-content: center;
  }

  .photo-container img {
    max-width: 50%; /* Adjust the size as needed */
  }
  </style>
   -->
<template>
  <div>

  </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>

</style>